<template>
  <div class="content">
    <div class="year-nav">
      <a v-for="(val,index) in yearOrder" :key="index" @click="handleClick(val)">{{val}}</a>
    </div>

    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(val,index) in yearOrder" :key="index" :title="val" :name="val" :id="'year'+val">
        <PaperCard v-for="(i,index) in papers[val]" :key="index" 
          :author  = "i.author" 
          :aritcle = "i.aritcle" 
          :journal = "i.journal" 
          :DOI = "i.DOI" 
        />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import PaperCard from "./PaperCard.vue"


export default {
  components: { PaperCard },
  data() {
    return {
      activeNames: [],
      papers: [],
      yearOrder: [],
    };
  },
  created() {
    this.$http.get('/json/Publications.json').then((response) => {
      console.log(response);
      this.papers = response.data.papers;
      this.yearOrder = response.data.yearOrder;
      // this.papers = JSON.parse(response.data.papers);
      
      this.activeNames = response.data.activeNames;
      // console.log(this.papers["2019"]);
    });
  },
  methods: {
    handleClick(val) {
        // console.log(val);
      // document.querySelector(val).scrollIntoView(true);
      this.activeNames.push(val);
      document.querySelector('#year'+val).scrollIntoView({
        behavior: "smooth", // "auto"(默认)|"instart"|"sommth"(缓动)
        block: "start" //"start"|"end"
      })
    }


  }


};
</script>

<style lang="less" scoped>
@import "../el-collapse-item.less";

.year-nav{
  width: 100%;
  // padding: 0 10px;
  text-align: center;
  word-break: break-all;
  word-wrap: normal;
  a{
    margin: 0 10px;
    color: black;
    border-bottom: 1px solid black;
  }
  a:hover{
    cursor:pointer;
  } 
}

</style>
